<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		body {
			width: 100vw;
			height: 200vh;
			box-sizing: border-box;
		}
		.wrapper {
			height: 30vh;
			width: 100vw;
		   	background-clip: content-box;
			/* animation: wrap 10s ease infinite; */
		}
		.wrapper div {
			height: 30vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		   	background-clip: content-box;
			
		}
		.wrapper div:nth-child(1){
			
			animation: wrap1 10s ease infinite;
			
		}
		.wrapper div:nth-child(2) {
			animation: wrap2 10s ease infinite;
		}
		
		.wrapper div:nth-child(3) {
			animation: wrap3 10s ease infinite;
		}
		
		
		@keyframes wrap{
			0%   {background-color: #f22;opacity:0.0;}
			50%  {background-color:  #2f2;opacity:0.5;}
			100%  {background-color:  #22f;opacity:1;}
		
		}
		@keyframes wrap1{
			0%   {background-color: #f22; opacity:0.1;}
			10%  {background-color: #f22; opacity:0.5;}
			20%  {background-color: #f22; opacity:0.8;}
			30%  {background-color: #f22; opacity:1;}
			40%  {background-color: #f22; opacity:0;}
			50%  {background-color: #f22; opacity:0;}
			60%  {background-color: #f22; opacity:0;}
			70%  {background-color: #f22; opacity:0;}
			80%  {background-color: #f22; opacity:0;}
			90%  {background-color: #f22; opacity:0;}
			100%  {background-color: #f22; opacity:0;}
		}
		@keyframes wrap2{
			0%   {background-color:  #2f2;opacity:0;}
			10%  {background-color:  #2f2;opacity:0;}
			20%  {background-color:  #2f2;opacity:0;}
			30%  {background-color:  #2f2;opacity:0.1;}
			40%  {background-color:  #2f2;opacity:0.5;}
			50%  {background-color:  #2f2;opacity:0.8;}
			60%  {background-color:  #2f2;opacity:1;}
			70%  {background-color:  #2f2;opacity:0;}
			80%  {background-color:  #2f2;opacity:0;}
			90%  {background-color:  #2f2;opacity:0;}
			100%  {background-color:  #2f2;opacity:0;}
		}
		@keyframes wrap3{
			0%   {background-color:  #22f;opacity:0;}
			10%  {background-color:  #22f;opacity:0;}
			20%  {background-color:  #22f;opacity:0;}
			30%  {background-color:  #22f;opacity:0;}
			40%  {background-color:  #22f;opacity:0;}
			50%  {background-color:  #22f;opacity:0;}
			60%  {background-color:  #22f;opacity:0.1;}
			70%  {background-color:  #22f;opacity:0.5;}
			80%  {background-color:  #22f;opacity:0.6;}
			90%  {background-color:  #22f;opacity:0.8;}
			100%  {background-color:  #22f;opacity:1;}
			}

		.container {
			height: 20vh;
			width: 100vw;
			border: solid 5px  #4fd;
			background-clip: content-box;
			padding: 5px;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			grid-template-rows: repeat(2,1fr);
			justify-items: center;
			align-items: center;
		}
		.container div {
			border: solid 2px #55ee12;
			padding: 1px;
			width:10vw;
			height:10vw;
			display: flex;
			justify-content: center;
			align-items: center;
	
		}
		main {
			height:80vh;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			
			justify-items: center;
			align-items: center;
			
		}
		
		main div {
			width:100%;
			height:100%;
			border: solid 3px #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30px;
			transition: .6s;
			padding: 5px;
			background-clip: content-box;
		}
		*, *:before, *:after {
		  box-sizing: inherit;
		}
		main div:nth-child(1){
			background-color: #f22;
		/* 	transform: translateX(100px); */
			
		}
		main div:nth-child(2) {
			background-color: #4e9;
		}

		main div:nth-child(3) {
			background-color: #4c6;
		}
		
		main div:nth-child(even):hover {
			transform: perspective(7000px) rotateY(-45deg) translate3d(-50%, 10%, 10px);
			
		}
		
		main div:nth-child(odd):hover {
			transform: perspective(7000px) rotateY(-45deg) translate3d(50%, 10%, 10px);
			
		}
		
		footer {
			width: 100vw;
			height: 10vh;
			background-color: #27ae60;
		}
	</style>
	<body>
		<div class="wrapper">
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</div>
		<main>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
		</main>
		<footer>
			
		</footer>
	</body>
</html>
